<template>
	<view class="content">
		<view class="item" v-for="(item,index) in list" :key="index">
			<text class="flag" v-if="item.default">默认</text>
			<uni-icons type="checkbox-filled" size="30" color="#333" v-if="item.default"
				@tap="check(index)"></uni-icons>
			<uni-icons type="circle" size="30" color="#333" v-else @tap="check(index)"></uni-icons>
			<view class="info" @tap="toDetail">
				<view class="name"> <text>{{item.name}}</text><text>{{item.tel}}</text> </view>
				<view class="address">{{item.address}}</view>
			</view>
			<uni-icons type="right" size="24" color="#333" @tap="toDetail"></uni-icons>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	const list = reactive([{
			default: true,
			name: '张三',
			tel: "17630327710",
			address: "河南郑州管城区十九大街大唐产业园",
		},
		{
			default: false,
			name: '张三',
			tel: "17630327710",
			address: "河南郑州管城区十九大街大唐产业园",
		}
	])
	const check = (index) => {
		list.map(item => {
			return item.default = false
		})
		list[index].default = true
	}
	onNavigationBarButtonTap((e) => {
		uni.navigateTo({
			url: 'addressDetail?type=add'
		})
	})
	const toDetail = () => {
		uni.navigateTo({
			url: 'addressDetail?type=edit'
		})
	}
</script>

<style lang="scss">
	.item {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx;
		overflow: hidden;
		font-size: 28rpx;

		.flag {
			background-color: #ffc400;
			color: #fff;
			font-size: 24rpx;
			transform: rotate(-45deg);
			padding: 24rpx 50rpx 14rpx 50rpx;
			position: absolute;
			top: -8rpx;
			left: -54rpx;
		}

		.info {
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.info {
				display: flex;
				gap: 20rpx;
			}
		}
	}
</style>